<template>
	<view class="container">
		<!-- 顶部区域 -->
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="top-box">
			<!-- 顶部导航栏 -->
			<view class="navbar">
				<u-icon name="arrow-left" color="#ffffff" size="40" @click="goback"></u-icon>
				<view class="order-text">订单详情</view>
			</view>
			<view class="status">{{orderinfo.orderStatus | ordertext}}</view>
			<image class="car" src="../../static/order/car.png" mode=""></image>
		</view>
		<!-- 物流信息及地址 -->
		<view class="address-box">
			<!-- 物流信息 -->
			<view class="express" v-if="orderinfo.orderStatus>1&&orderinfo.orderStatus<6">
				<image src="../../static/order/express.png" mode=""></image>
				<view class="express-info">
					<view class="tttttt">{{expressInfo}}</view>
					<view class="time">{{time}}</view>
				</view>
				<view>
					<!-- <u-icon name="arrow-right" color="#909090" size="20"></u-icon> -->
				</view>
			</view>
			<!-- 收货地址 -->
			<view class="address">
				<image src="../../static/order/address.png" mode=""></image>
				<view class="address-info">
					<view>
						<text>{{address.userName}}</text>
						<text class="phone">{{address.userPhone}}</text>
					</view>
					<view class="add-details">{{address.provinceName}}{{address.cityName}}{{address.areaName}}{{address.streetName}}{{address.detail}}</view>
				</view>
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="product" v-for="(item,index) in goodsInfo" @click="top(item.goodsId)">
			<!-- 店铺名 -->
			<view class="store">
				<view>店铺{{orderinfo.shopName}}</view>
			</view>
			<!-- 商品详情 -->
			<view class="product-detail" >
				<image :src="item.imageUrl"></image>
				<view class="product-title">
					<view class="hidden">{{item.goodsName}}</view>
					<view class="guige">规格：{{item.goodsAttr | text}}</view>
				</view>
				<view class="price">
					<view v-if="item.totalPrice!=0&&item.totalIntegral==0">￥{{item.totalPrice}}</view>
					<view v-if="item.totalPrice==0&&item.totalIntegral!=0">{{item.totalIntegral}}积分</view>
					<view v-if="item.totalPrice!=0&&item.totalIntegral!=0">￥{{item.totalPrice}}</view>
					<view v-if="item.totalPrice!=0&&item.totalIntegral!=0">{{item.totalIntegral}}积分</view>
					<view>x1</view>
				</view>
			</view>
		</view>
		<view class="pay" v-if="orderinfo.fetchCode!=null">自提码：{{orderinfo.fetchCode}}</view>
		<view class="pay">
			<text v-if="orderinfo.totalPrice!=0&&orderinfo.totalIntegral==0">实付款￥{{orderinfo.actualPrice}}</text>
			<text v-if="orderinfo.totalPrice==0&&orderinfo.totalIntegral!=0">实付款{{orderinfo.totalIntegral}}积分</text>
			<text v-if="orderinfo.totalPrice!=0&&orderinfo.totalIntegral!=0">实付款￥{{orderinfo.actualPrice}}+{{orderinfo.totalIntegral}}积分</text>
		</view>
		<!-- 订单信息 -->
		<view class="order-info">
			<view class="order-title">订单信息</view>
			<view class="order-item">
				<text>订单编号：</text>
				<text class="right">{{orderinfo.orderCode}}</text>
			</view>
			<view class="order-item">
				<text>创建时间：</text>
				<text class="right">{{$u.timeFormat(orderinfo.createTime, 'yyyy-mm-dd hh:MM:ss ')}}</text>
			</view>
			<view class="order-item">
				<text>付款时间：</text>
				<text class="right">{{$u.timeFormat(orderinfo.payTime, 'yyyy-mm-dd hh:MM:ss ')}}</text>
			</view>
			<view class="order-item" v-if="orderinfo.deliveryTime!=null">
				<text>发货时间：</text>
				<text class="right">{{$u.timeFormat(orderinfo.deliveryTime, 'yyyy-mm-dd hh:MM:ss ')}}</text>
			</view>
			<view class="order-item" v-if="orderinfo.receiptTime!=null">
				<text>成交时间：</text>
				<text class="right">{{$u.timeFormat(orderinfo.receiptTime, 'yyyy-mm-dd hh:MM:ss ')}}</text>
			</view>
		</view>
		<!-- 底部bar -->
		<view class="bar">
			<view class="look" v-if="orderinfo.orderStatus>1&&orderinfo.orderStatus<5" @click="goExprsss(orderId)">查看物流</view>
			<view class="look" v-if="orderinfo.orderStatus==2">确认收货</view> 
			<view class="look" v-if="orderinfo.orderStatus==0" @click="topay">立即付款</view> 
			<view class="look" v-if="orderinfo.orderStatus==3">立即评价</view> 
		</view>
	</view>
</template>

<script>
	import{orderInfo,queryLogisticsInfo}from"../../api/product.js"
	export default{
		data(){
			return{
				orderId:"",
				goodsInfo:[],
				orderinfo:{},
				address:{},
				expressInfo:'',
				time:''
			}
		},
		filters:{
			ordertext(val){
				console.log(val)
				let arr=["待支付","待发货","待收货","待评价","已完成","已取消"]
				for(let i=0;i<arr.length;i++){
					if(val==i){
						return arr[i]
					}
				}
			},
			text(val){
				let s= val.replace(/\"/g,"")
				let ss=s.replace(/\[/g,"")
				let sss=ss.replace(/\]/g,"")
				return sss
			}
		},
		onLoad(e) {
			this.orderId=e.orderid
			this.getOrderInfo()
		},
		methods:{
			getOneExpress(){
				this.get(queryLogisticsInfo,{orderId:this.orderId}).then(res=>{
					console.log(res)
					let arr=JSON.parse(res.data)
					console.log(arr)
					this.expressInfo=arr.data[0].context
					this.time=arr.data[0].time
				})
			},
			goExprsss(item){
				uni.navigateTo({
					url:"../express/express?orderId="+item
				})
			},
			goback(){
				uni.navigateBack({
					delta:1
				})
			},
			// 获取订单信息
			async getOrderInfo(){
				let res=await this.get(orderInfo,{orderId:this.orderId})
				this.goodsInfo=res.data.orderGoodsList
				this.orderinfo=res.data.order
				this.address=res.data.userAddress
				if(this.orderinfo.orderStatus>1){
					this.getOneExpress()
				}
			},
			topay(){
				uni.navigateTo({
					url:"./pay?orderid="+this.orderinfo.orderId
				})
			},
			top(id){
				uni.navigateTo({
					url:"/pages/product/product?id="+id
				})
			}
		}
	}
</script>

<style lang="less">
	.container{
		min-height: 100vh;
		background: #F1F1F1;
		padding-bottom: 90rpx;
	}
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #FFFFFF;
	}
	.top-box{
		position: relative;
		width: 750rpx;
		height: 327rpx;
		background: linear-gradient(180deg, #F09238 0%, #EC5F2A 100%);
		padding-top: 20rpx;
		padding-left: 30rpx;
	}
	.navbar{
		display: flex;
		align-items: center;
	}
	.order-text{
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin-left: 30rpx;
	}
	.status{
		margin-top: 84rpx;
		font-size: 47rpx;
		font-weight: 500;
		color: #FFFFFF;
	}
	.car{
		position: absolute;
		width: 190rpx;
		height: 154rpx;
		right: 72rpx;
		bottom: 40rpx;
	}
	.address-box{
		width: 690rpx;
		// height: 316rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 30rpx;
	}
	.express{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 20rpx;
		
		image{
			width: 44rpx;
			height: 44rpx;
		}
		.express-info{
			width: 560rpx;
			// height: 66rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #3597DE;
			margin-left: 20rpx;
			
		}
		.time{
			font-size: 24rpx;
			font-weight: 300;
			color: #333333;
			margin-top: 15rpx;
		}
	}
	.address{
		display: flex;
		align-items: center;
		padding: 30rpx 20rpx;
		image{
			width: 44rpx;
			height: 44rpx;
		}
	}
	.address-info{
		font-size: 24rpx;
		font-weight: bold;
		color: #000000;
		margin-left: 20rpx;
	}
	.phone{
		font-weight: 500;
		color: #999999;
		margin-left: 30rpx;
	}
	.add-details{
		margin-top: 12rpx;
		width: 560rpx;
	}
	.product{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 30rpx;
		padding: 30rpx 20rpx;
		
	}
	.store{
		display: flex;
		align-items: center;
	}
	.store :nth-child(1){
		margin-right: 50rpx;
	}
	.product-detail{
		display: flex;
		margin-top: 20rpx;
		image{
			width: 163rpx;
			height: 163rpx;
		}
	}
	.product-title{
		width: 295rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;
		margin-left: 20rpx;
	}
	.guige{
		width:295rpx;
		color: #999999;
		margin-top: 20rpx;
	}
	.hidden{
		overflow: hidden;
		text-overflow: ellipsis;  
		display: -webkit-box;  
		-webkit-line-clamp: 2;  
		-webkit-box-orient: vertical; 
	}
	.price{
		text-align: right;
		width: 174rpx;
		font-size: 28rpx;
	}
	.pay{
		width: 690rpx;
		background-color: #FFFFFF;
		margin-left: 30rpx;
		height: 80rpx;
		border-radius: 10rpx;
		margin-top: 50rpx;
		text-align: right;
		font-size: 28rpx;
		color: #F0812D;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 40rpx;
	}
	.totle{
		font-weight: 300;
	}
	.order-info{
		width: 690rpx;
		// height: 362rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 30rpx;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
	}
	.order-title{
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}
	.order-item{
		margin: 20rpx 0;
		font-size: 24rpx;
		color: #666666;
	}
	.right{
		color: #575757;
		margin-left: 64rpx;
	}
	.bar{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.look{
		width: 134rpx;
		height: 50rpx;
		background: #FFFFFF;
		border: 1px solid #707070;
		border-radius: 30rpx;
		text-align: center;
		line-height: 50rpx;
		margin-right: 30rpx;
		font-size: 24rpx;
		font-weight: 100;
		color: #575757;
		
	}
</style>
